<template>
    <div>
        <div class="operate center-flex-box">
            <el-input placeholder="请输入内容" v-model="queryInfo.content" class="input-with-select item">
                <el-select class="select" v-model="mode" slot="prepend" placeholder="请选择">
                    <el-option label="根据ID" :value="0"></el-option>
                    <el-option label="根据作者ID" :value="1"></el-option>
                    <el-option label="根据区域" :value="2"></el-option>
                </el-select>
            </el-input>
            <el-select class="item" v-if="mode===2" v-model="queryInfo.type" placeholder="请选择类型">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="COMMON" :value="0"></el-option>
                <el-option label="精华" :value="1"></el-option>
                <el-option label="活动" :value="2"></el-option>
                <el-option label="指引" :value="3"></el-option>
                <el-option label="求助" :value="4"></el-option>
            </el-select>
            <el-cascader
                v-if="mode===2"
                class="item"
                placeholder="排序"
                expand-trigger="hover"
                :options="options"
                v-model="queryInfo.sort">
            </el-cascader>
            <el-button class="item" @click="obtainPosts">查找</el-button>
        </div>
        <el-table
            :data="posts"
            stripe
            max-height="532"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="帖子ID"
                sortable
                width="180">
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题"
                sortable
                width="240">
            </el-table-column>
            <el-table-column
                prop="author"
                label="作者ID"
                sortable
                width="180">
            </el-table-column>
            <el-table-column
                prop="area"
                label="区域"
                sortable
                width="120">
            </el-table-column>
            <el-table-column
                prop="type"
                label="类型"
                sortable
                width="120">
            </el-table-column>
            <el-table-column
                prop="labels"
                label="标签"
                sortable
                width="200">
            </el-table-column>
            <el-table-column
                prop="collectCount"
                label="收藏数量"
                sortable
                width="120">
            </el-table-column>
            <el-table-column
                prop="replyCount"
                label="回复"
                sortable
                width="120">
            </el-table-column>
            <el-table-column
                prop="publishTime"
                label="发布时间"
                sortable
                width="160">
            </el-table-column>
            <el-table-column
                prop="lastReplyTime"
                label="最后回复时间"
                sortable
                width="160">
            </el-table-column>
            <el-table-column
                v-if="hasPermission('DELETE_POST')"
                fixed="right"
                width="80"
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="remove(scope.row.id)"
                               type="danger"
                               size="mini"
                               plain>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.page"
            :page-size="pageInfo.size"
            layout="total, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import { postType } from '@/constant'
    import { convertTime } from '@/utils/date'

    export default {
        name: 'postManagement',
        data () {
            return {
                posts: [],
                pageInfo: {
                    page: 1,
                    size: 100,
                    total: 0
                },
                queryInfo: {
                    content: '',
                    type: -1,
                    sort: []
                },
                mode: 1,
                options: [{
                    label: '无',
                    value: 'none'
                }, {
                    label: '回复数量',
                    value: 'reply_count',
                    children: [{
                        label: '正序',
                        value: 'asc'
                    }, {
                        label: '倒序',
                        value: 'desc'
                    }]
                }, {
                    label: '收藏数量',
                    value: 'collect_count',
                    children: [{
                        label: '正序',
                        value: 'asc'
                    }, {
                        label: '倒序',
                        value: 'desc'
                    }]
                }, {
                    label: '最后回复时间',
                    value: 'last_reply_time',
                    children: [{
                        label: '正序',
                        value: 'asc'
                    }, {
                        label: '倒序',
                        value: 'desc'
                    }]
                }, {
                    label: '发布时间',
                    value: 'publish_time',
                    children: [{
                        label: '正序',
                        value: 'asc'
                    }, {
                        label: '倒序',
                        value: 'desc'
                    }]
                }]
            }
        },
        mounted () {
            this.queryInfo.content = this.getUser.userId
            this.obtainPosts()
        },
        computed: {
            ...mapGetters({
                getUser: 'user/getUser',
                hasPermission: 'user/hasPermission'
            })
        },
        methods: {
            ...mapActions({
                getByIdAction: 'post/getById',
                pageAuthorPostsAction: 'post/pageAuthorPosts',
                pageAreaPostAction: 'post/pageAreaPost',
                deletePostAction: 'post/deletePost'
            }),
            handleSizeChange (val) {
                this.pageInfo.size = val
                this.obtainPosts()
            },
            handleCurrentChange (val) {
                this.pageInfo.page = val
                this.obtainPosts()
            },
            obtainPosts () {
                switch (this.mode) {
                    case 0:
                        this.action(this.getByIdAction(this.obtainQuery()), data => {
                            if (data.data) {
                                this.posts = [data.data]
                                this.formatPost(this.posts)
                            } else {
                                this.posts = []
                            }
                        })
                        break
                    case 1:
                        this.action(this.pageAuthorPostsAction(this.obtainQuery()), data => {
                            if (data.data) {
                                this.posts = data.data.records
                                this.formatPost(this.posts)
                                this.pageInfo.total = data.data.total
                            } else {
                                this.posts = []
                            }
                        })
                        break
                    case 2:
                        this.action(this.pageAreaPostAction(this.obtainQuery()), data => {
                            if (data.data) {
                                this.posts = data.data.records
                                this.formatPost(this.posts)
                                this.pageInfo.total = data.data.total
                            } else {
                                this.posts = []
                            }
                        })
                        break
                }
            },
            obtainQuery () {
                switch (this.mode) {
                    case 0:
                        return this.queryInfo.content
                    case 1:
                        return {
                            page: this.pageInfo.page,
                            size: this.pageInfo.size,
                            authorId: this.queryInfo.content
                        }
                    case 2:
                        let query = {
                            page: this.pageInfo.page,
                            size: this.pageInfo.size,
                            area: this.queryInfo.content,
                            type: this.queryInfo.type === -1 ? '' : this.queryInfo.type
                        }
                        if (this.queryInfo.sort.length === 2) {
                            query[this.queryInfo.sort[1]] = this.queryInfo.sort[0]
                        }
                        return query
                }
            },
            formatPost (posts) {
                posts.forEach(post => {
                    post.author = post.author.id
                    post.type = postType[post.type].text
                    post.publishTime = convertTime(post.publishTime)
                    post.lastReplyTime = convertTime(post.lastReplyTime)
                    if (post.labels) {
                        post.labels = post.labels.map(label => label.name).join(' | ')
                    }
                })
            },
            remove (postId) {
                this.action(this.deletePostAction(postId), data => {
                    this.$message.success('删除成功')
                    this.obtainPosts()
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../../style/scss';

    .operate {
        height: 80px;
        width: 96%;
        padding: 0 2%;

        .item {
            margin: 6px;
        }

        .input-with-select {
            width: 360px;
            background-color: #fff;

            .el-select {
                width: 120px;
            }
        }
    }

    .left {
        float: left;
    }
</style>
